<template>
  <div class="market">
    <div class="container-fluid">
      <headers :userInfo="true"></headers>
      <div class="inventory row">
        <div class="col-xs-6">当前库存砖石：{{ nowStockBrick }}</div>
        <div class="col-xs-6 text-right">本月销售砖石：{{ thisMonthSellBrick }}</div>
        <div style="padding: 0 15px;">
          <span class="btn" @click="marketLog()" style="background: #ff9300;">销售记录</span>
        </div>
      </div>
      <div class="game-id-box row">
        <div class="col-xs-9" style="padding-right: 0">
          <label for="">游戏ID：</label>
          <input type="text" class="form-control query-game-id" />
        </div>
        <div class="col-xs-3 text-right" style="padding-left: 0.2rem;">
          <button class="btn btn-two">查询</button>
        </div>
      </div>
      <div class="game-player-info row">
        <div class="col-xs-12">
          <h4>游戏信息：</h4>
          <ul class="info">
            <li>昵称：李四</li>
            <li>游戏ID：8527</li>
            <li>砖石：9999</li>
            <li>金币：1597563</li>
          </ul>
          <div class="give-box row" style="border-bottom: 0;">
            <div class="col-xs-9" style="padding-right: 0">
              <label for="">砖石数量：</label>
              <input type="number" class="form-control give-number" />
              <label for="">颗</label>
            </div>
            <div class="col-xs-3 text-right" style="padding-left: 0.2rem;">
              <button class="btn btn-two" @click="giveFn(true)">赠送</button>
            </div>
          </div>
          <div class="give-box row" style="border-bottom: 0;">
            <div class="col-xs-9" style="padding-right: 0">
              <label for="">金币数量：</label>
              <input type="number" class="form-control give-number" />
              <label for="">金</label>
            </div>
            <div class="col-xs-3 text-right" style="padding-left: 0.2rem;">
              <button class="btn btn-two" @click="giveFn(false)">赠送</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="market-fade"  mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
  import Headers from '../../components/Header.vue';
  import {mapActions,mapGetters} from 'vuex';
  import {userContent} from '../../service/getData';
  export default {
    data(){
      return {
        headerTitle:'销售',
        returnStatus:true,
        nowStockBrick:null,
        thisMonthSellBrick:null
      }
    },
    components:{Headers},
    computed:{
      ...mapGetters([
        'headerStatus'
      ])
    },
    mounted(){
      let _this = this;
      this.$nextTick(function(){
        _this.headers();
        _this.nowStockBrick = userContent.userInfo.nowStockBrick;
        _this.thisMonthSellBrick = userContent.userInfo.thisMonthSellBrick;
      })
    },
    methods:{
      headers(){
        this.headerStatus.headerTitle = this.headerTitle;
        this.headerStatus.returnStatus = this.returnStatus;
      },
      giveFn(type){
        let msg = '你已成功给  茅庐不吃草 ID100658 金币20000金';
        if(type){
          msg = '你已成功给  茅庐不吃草 ID100658 钻石200颗';
        }
        layer.alert(msg, {
          title:['成功','text-align:center;padding:0'],
          skin: 'layui-layer-lan',
          closeBtn: 0,
          anim: 1 //动画类型
        });
      },
      marketLog(){
        this.$router.push('/market/market_log');
      }


    }
  }
</script>
<style scoped lang="less">
  @import "../../style/main";
  .market-fade-enter-active, .market-fade-leave-active {
    transition: all .3s;
  }
  .market-fade-enter, .market-fade-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
